<template>
	<view class="rankings-page">
		<!-- 背景层 -->
		<view class="bg-layer" :style="{ backgroundImage: 'url(' + bgImage + ')' }"></view>
		<navgats :images="img"></navgats>
		<!-- 半透明遮罩 (亮色风格调整) -->
		<view class="overlay"></view>

		<!-- 顶部导航栏 -->
		<!-- <view class="navbar"> -->
		<!-- 	<view class="back-btn" @click="navigateBack">
				<i class="fa fa-arrow-left"></i>
			</view>
			<view class="title">排行榜</view>
			<view class="filter-btn" @click="showFilter">
				<i class="fa fa-filter"></i>
			</view> -->
		<!-- </view> -->

		<!-- 排行榜分类标签 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'wealth' }" @click="switchTab('wealth')">
				财富榜
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'cases' }" @click="switchTab('cases')">
				开箱榜
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'rare' }" @click="switchTab('rare')">
				稀有物品榜
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'wins' }" @click="switchTab('wins')">
				胜率榜
			</view>
		</view>

		<!-- 排行榜周期选择 -->
		<view class="period-selector">
			<view class="period-item" :class="{ active: activePeriod === 'day' }" @click="switchPeriod('day')">
				今日
			</view>
			<view class="period-item" :class="{ active: activePeriod === 'week' }" @click="switchPeriod('week')">
				本周
			</view>
			<view class="period-item" :class="{ active: activePeriod === 'month' }" @click="switchPeriod('month')">
				本月
			</view>
			<view class="period-item" :class="{ active: activePeriod === 'all' }" @click="switchPeriod('all')">
				总榜
			</view>
		</view>

		<!-- 前三名展示区 -->
		<view class="top-three">
			<view class="second-place">
				<view class="rank-badge silver">2</view>
				<view class="user-avatar">
					<image :src="rankings[1] && rankings[1].avatar" mode="widthFix"></image>
				</view>
				<view class="user-info">
					<view class="user-name">{{ rankings[1] && rankings[1].name }}</view>
					<view class="user-stat">{{ getStatValue(rankings[1]) }}</view>
				</view>
				<view class="user-reward">
					<i class="fa fa-medal"></i>
					<span>{{ rankings[1] && rankings[1].reward }}</span>
				</view>
			</view>

			<view class="first-place">
				<view class="rank-badge gold">1</view>
				<view class="user-avatar">
					<image :src="rankings[0] && rankings[0].avatar" mode="widthFix"></image>
				</view>
				<view class="user-info">
					<view class="user-name">{{ rankings[0] && rankings[0].name }}</view>
					<view class="user-stat">{{ getStatValue(rankings[0]) }}</view>
				</view>
				<view class="crown">
					<i class="fa fa-crown"></i>
				</view>
				<view class="user-reward">
					<i class="fa fa-medal"></i>
					<span>{{ rankings[0] && rankings[0].reward }}</span>
				</view>
			</view>

			<view class="third-place">
				<view class="rank-badge bronze">3</view>
				<view class="user-avatar">
					<image :src="rankings[2] && rankings[2].avatar" mode="widthFix"></image>
				</view>
				<view class="user-info">
					<view class="user-name">{{ rankings[2] && rankings[2].name }}</view>
					<view class="user-stat">{{ getStatValue(rankings[2]) }}</view>
				</view>
				<view class="user-reward">
					<i class="fa fa-medal"></i>
					<span>{{ rankings[2] && rankings[2].reward }}</span>
				</view>
			</view>
		</view>

		<!-- 排行榜列表 -->
		<scroll-view class="rankings-list" scroll-y>
			<view class="rank-item" v-for="(user, index) in rankings.slice(3)" :key="index + 3"
				:class="{ 'current-user': user.isCurrentUser }">
				<view class="rank-number">
					{{ index + 4 }}
				</view>
				<view class="user-avatar">
					<image :src="user.avatar" mode="widthFix"></image>
				</view>
				<view class="user-info">
					<view class="user-name">
						{{ user.name }}
						<view class="user-level" v-if="user.level">
							Lv.{{ user.level }}
						</view>
						<view class="current-user-tag" v-if="user.isCurrentUser">
							你
						</view>
					</view>
					<view class="user-stat">{{ getStatValue(user) }}</view>
				</view>
				<view class="user-reward" v-if="index < 7">
					<i class="fa fa-medal"></i>
					<span>{{ user.reward }}</span>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="rankings.length === 0">
				<i class="fa fa-trophy"></i>
				<view class="empty-text">暂无排名数据</view>
				<view class="empty-subtext">数据加载中...</view>
			</view>
		</scroll-view>

		<!-- 我的排名卡片 -->
		<view class="my-rank-card" v-if="myRank && myRank > 10">
			<view class="card-content">
				<view class="card-title">我的排名</view>
				<view class="rank-info">
					<view class="my-rank">{{ myRank }}</view>
					<view class="rank-progress">
						<view class="progress-text">距离前10名还差</view>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: myProgress + '%' }"></view>
						</view>
						<view class="progress-stats">{{ myProgress }}%</view>
					</view>
				</view>
				<button class="improve-btn" @click="goImproveRank">
					提升排名
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import navgats from "../../../Component/navgatsmy/navgatsmy.vue"
	export default {
		data() {
			return {
				// 背景图（用户可替换）
				bgImage: '',
				img: "https://img.jingkakeji.com/img/static/paihang.png",
				// 活跃标签和周期
				activeTab: 'wealth',
				activePeriod: 'week',

				// 我的排名和进度
				myRank: 25,
				myProgress: 65,

				// 排行榜数据
				rankings: [
					// 第一名
					{
						id: 1,
						name: 'CSGO_Pro',
						avatar: 'https://picsum.photos/id/237/100/100',
						level: 48,
						stats: {
							wealth: '¥125,800',
							cases: 1250,
							rare: 48,
							wins: '89.5%'
						},
						reward: '5000 开箱币 + 稀有武器箱'
					},

				]
			};
		},
		components: {
			navgats
		},
		onLoad() {
			// 设置背景图
			this.bgImage = 'https://img.jingkakeji.com/img/static/yonghusdf.png';

			// 监听窗口大小变化
			uni.onWindowResize(this.handleWindowResize);
		},
		onUnload() {
			// 移除窗口大小变化监听
			uni.offWindowResize(this.handleWindowResize);
		},
		methods: {
			// 处理窗口大小变化
			handleWindowResize() {
				// 响应式调整逻辑
			},

			// 切换排行榜类型
			switchTab(tab) {
				this.activeTab = tab;
				// 添加切换动画效果
				this.$nextTick(() => {
					const tabItems = uni.createSelectorQuery().selectAll('.tab-item');
					tabItems.boundingClientRect(data => {
						// 动画逻辑
					}).exec();
				});
			},

			// 切换时间周期
			switchPeriod(period) {
				this.activePeriod = period;
			},

			// 获取统计值文本
			getStatValue(user) {
				if (!user || !user.stats) return '';

				const labels = {
					'wealth': '总资产: ',
					'cases': '开箱数: ',
					'rare': '稀有物品: ',
					'wins': '胜率: '
				};

				return labels[this.activeTab] + user.stats[this.activeTab];
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 显示筛选选项
			showFilter() {
				uni.showActionSheet({
					itemList: ['显示前10名', '显示前50名', '显示我的好友', '刷新数据'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								// 显示前10名逻辑
								break;
							case 1:
								// 显示前50名逻辑
								break;
							case 2:
								// 显示好友逻辑
								break;
							case 3:
								// 刷新数据
								uni.showToast({
									title: '数据已刷新',
									icon: 'success'
								});
								break;
						}
					}
				});
			},

			// 提升排名
			goImproveRank() {
				uni.navigateTo({
					url: '/pages/cases/cases'
				});
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 - 亮色风格 */
	.rankings-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
	}

	/* 背景层 */
	.bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		z-index: 0;
		filter: brightness(0.9);
	}

	/* 遮罩层 - 亮色风格调整 */
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(245, 245, 250, 0.9));
		z-index: -1;
	}

	/* 导航栏 - 亮色风格 */
	.navbar {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 16px;
		color: #222;
		/* background-color: rgba(255, 255, 255, 0.9); */
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.back-btn,
	.filter-btn {
		position: absolute;
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #222;
		font-size: 20px;
		border-radius: 50%;
		transition: background-color 0.2s;
	}

	.back-btn {
		left: 16px;
	}

	.filter-btn {
		right: 16px;
	}

	.back-btn:hover,
	.filter-btn:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 0.5px;
	}

	/* 标签栏 - 亮色风格 */
	.tabs {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: row;
		height: 52px;
		background-color: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
		overflow-x: auto;
		white-space: nowrap;
	}

	.tab-item {
		flex: 1;
		min-width: 90px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 15px;
		font-weight: 500;
		position: relative;
		padding: 0 8px;
		transition: color 0.2s;
	}

	.tab-item.active {
		color: #ff3e6c;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, #ff3e6c, #ff7e5f);
	}

	.tab-item:hover {
		color: #ff3e6c;
	}

	/* 周期选择器 */
	.period-selector {
		position: relative;
		z-index: 3;
		display: flex;
		padding: 8px 12px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.period-item {
		padding: 6px 14px;
		margin-right: 8px;
		border-radius: 16px;
		font-size: 13px;
		color: #888;
		background-color: #f5f5f5;
		transition: all 0.2s;
	}

	.period-item.active {
		background-color: #ff3e6c;
		color: #fff;
	}

	.period-item:hover {
		background-color: #eee;
	}

	.period-item.active:hover {
		background-color: #ff5a80;
	}

	/* 前三名展示区 */
	.top-three {
		position: relative;
		z-index: 3;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		padding: 20px 16px 10px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.first-place,
	.second-place,
	.third-place {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;
		max-width: 140px;
	}

	.first-place {
		order: 2;
		margin: 0 10px;
		margin-bottom: 15px;
	}

	.second-place {
		order: 1;
	}

	.third-place {
		order: 3;
	}

	.rank-badge {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	}

	.rank-badge.gold {
		background: linear-gradient(135deg, #ffd700, #ffb347);
		border: 2px solid #ffd700;
	}

	.rank-badge.silver {
		background: linear-gradient(135deg, #c0c0c0, #e6e6e6);
		border: 2px solid #c0c0c0;
		color: #444;
	}

	.rank-badge.bronze {
		background: linear-gradient(135deg, #cd7f32, #e6a86e);
		border: 2px solid #cd7f32;
	}

	.user-avatar {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		overflow: hidden;
		border: 3px solid #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		margin-bottom: 10px;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.first-place .user-avatar {
		width: 80px;
		height: 80px;
		border-color: #ffd700;
		box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
	}

	.user-info {
		text-align: center;
		margin-bottom: 8px;
		width: 100%;
	}

	.user-name {
		font-size: 15px;
		font-weight: 600;
		color: #222;
		margin-bottom: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.user-stat {
		font-size: 13px;
		color: #666;
	}

	.crown {
		color: #ffd700;
		font-size: 24px;
		margin-bottom: 8px;
		text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
	}

	.user-reward {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #ff3e6c;
		background-color: rgba(255, 62, 108, 0.08);
		padding: 4px 10px;
		border-radius: 12px;
		white-space: nowrap;
	}

	.user-reward .fa {
		margin-right: 4px;
		font-size: 11px;
	}

	/* 排行榜列表 */
	.rankings-list {
		position: relative;
		z-index: 3;
		width: 100%;
		min-height: calc(100vh - 420px);
		background-color: #fff;
	}

	.rank-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid #f5f5f5;
		transition: background-color 0.2s;
	}

	.rank-item:hover {
		background-color: #fafafa;
	}

	.rank-item.current-user {
		background-color: rgba(255, 62, 108, 0.05);
		border-left: 3px solid #ff3e6c;
	}

	.rank-number {
		width: 36px;
		height: 36px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		color: #888;
		background-color: #f5f5f5;
		margin-right: 12px;
	}

	.rank-item:nth-child(-n+7) .rank-number {
		color: #ff3e6c;
		background-color: rgba(255, 62, 108, 0.08);
	}

	.rank-item .user-avatar {
		width: 50px;
		height: 50px;
		margin-right: 14px;
		margin-bottom: 0;
		border-width: 2px;
	}

	.rank-item .user-info {
		flex: 1;
		text-align: left;
		margin-bottom: 0;
	}

	.rank-item .user-name {
		display: flex;
		align-items: center;
		margin-bottom: 2px;
	}

	.user-level {
		font-size: 11px;
		color: #fff;
		background-color: #6c63ff;
		padding: 1px 6px;
		border-radius: 10px;
		margin-left: 8px;
	}

	.current-user-tag {
		font-size: 11px;
		color: #fff;
		background-color: #ff3e6c;
		padding: 1px 6px;
		border-radius: 10px;
		margin-left: 8px;
	}

	.rank-item .user-reward {
		margin-left: auto;
	}

	/* 空状态 */
	.empty-state {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 100px;
		color: #999;
	}

	.empty-state .fa {
		font-size: 70px;
		margin-bottom: 20px;
		color: #ddd;
	}

	.empty-text {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.empty-subtext {
		font-size: 14px;
		color: #bbb;
	}

	/* 我的排名卡片 */
	.my-rank-card {
		position: relative;
		z-index: 3;
		padding: 16px;
		background-color: #fff;
		border-top: 1px solid #f5f5f5;
	}

	.card-content {
		background: linear-gradient(135deg, #6c63ff, #9f7aea);
		border-radius: 12px;
		padding: 18px;
		color: #fff;
		box-shadow: 0 4px 15px rgba(108, 99, 255, 0.2);
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
	}

	.card-title::after {
		content: '';
		flex: 1;
		height: 1px;
		background-color: rgba(255, 255, 255, 0.2);
		margin-left: 12px;
	}

	.rank-info {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.my-rank {
		font-size: 32px;
		font-weight: 700;
		margin-right: 16px;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.rank-progress {
		flex: 1;
	}

	.progress-text {
		font-size: 13px;
		margin-bottom: 6px;
		color: rgba(255, 255, 255, 0.9);
	}

	.progress-bar {
		height: 8px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 4px;
	}

	.progress-fill {
		height: 100%;
		background-color: #fff;
		border-radius: 4px;
		transition: width 1s ease-in-out;
	}

	.progress-stats {
		font-size: 12px;
		text-align: right;
		color: rgba(255, 255, 255, 0.8);
	}

	.improve-btn {
		width: 100%;
		padding: 12px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		border: none;
		background-color: #fff;
		color: #6c63ff;
		cursor: pointer;
		transition: all 0.2s;
	}

	.improve-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
	}

	/* 响应式调整 */
	@media screen and (max-width: 320px) {
		.user-name {
			font-size: 14px;
		}

		.user-stat {
			font-size: 12px;
		}

		.rank-number {
			width: 32px;
			height: 32px;
			font-size: 14px;
		}

		.user-avatar {
			width: 60px;
			height: 60px;
		}

		.first-place .user-avatar {
			width: 70px;
			height: 70px;
		}
	}

	@media screen and (min-width: 768px) {
		.top-three {
			padding: 30px 20px 20px;
		}

		.first-place,
		.second-place,
		.third-place {
			max-width: 180px;
		}

		.user-avatar {
			width: 90px;
			height: 90px;
		}

		.first-place .user-avatar {
			width: 100px;
			height: 100px;
		}

		.user-name {
			font-size: 17px;
		}

		.user-stat {
			font-size: 14px;
		}

		.rank-item {
			padding: 15px 20px;
		}
	}
</style>